<template>
    <div style="overflow:hidden">
        <section class="content-header">
            <div class="title clearfix">
                <div style="float:left;">首页<span style="padding:0 5px">></span>
                    <router-link :to="{path:'carsmanage'}">
                        车辆管理</router-link>
                    <i class="fa fa-angle-right fa-1x" aria-hidden="true"></i> 修改车辆</div>
            </div>
        </section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车牌号码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车牌号码" v-model="carList.carNo">
                            </div>
                        </div>
                        <carType v-model="carList.carType" :msg="carList.carType" />
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车辆颜色：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车辆颜色" v-model="carList.carColor">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">车辆品牌：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车辆品牌" v-model="carList.carBrand">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">发动机号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入发动机号" v-model="carList.engineNumber">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">车架号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车架号" v-model="carList.carFrame">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">当前里程：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入当前里程" v-model="carList.carMileage">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 机器编码：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入机器编码" v-model="carList.machineNum">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> SIM卡号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入SIM卡号" v-model="carList.simno">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="4" placeholder="请输入备注" v-model="carList.carRemark" maxlength="80"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error">
                </div>
                <div class="col-md-4">
                    <div class="box-body">
                        <deptlist v-model="carList.deptid" :msg="carList.deptid" />
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 车辆管理员名字：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入车辆管理员名字" v-model="carList.driver">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 联系电话：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入联系电话" v-model="carList.dervermobile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">驾驶证号：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入驾驶证号" v-model="carList.driverNumber">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">驾驶证类型：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入驾驶证类型" v-model="carList.driverType">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">上传照片：</label>
                            <div class="col-sm-8" :class="{hiddenIcon: fileList.length>0}">
                                <el-upload :action="uploadUrl" :file-list="fileList" list-type="picture-card" :on-success='handleSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button type="button" class="btn btn-info" style="margin-right:50px" @click="postUpdatecar">修改</button>
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="carsmanage">
                                    <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import deptlist from "@/components/common/deptlist.vue";
import carType from "@/components/common/carType.vue";

export default {
    data() {
        return {
            carList: {},
            uploadUrl: `${window.apiPrefix}api/car/uploadImage`,
            dialogImageUrl: "",
            dialogVisible: false,
            fileList: [
                // {
                //     name: "food.jpeg",
                //     url:
                //         "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
                // }
            ],
            btn: false
        };
    },
    components: {
        deptlist,
        carType
    },
    watch: {
        fileList() {
            if (this.btn) {
                this.carList.photopath = "";
                this.fileList.forEach(item => {
                    this.carList.photopath += `${item.response.data}`;
                });
                console.log(this.carList.photopath);
            }
        }
    },
    mounted() {
        this.getCarbyid();
    },
    methods: {
        handleRemove(file, fileList) {
            this.btn = !this.btn;
            this.fileList = fileList;
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
            // console.log(this.fileList);
        },
        getCarbyid() {
            this.$api.cars.home
                .getcarbyid({ id: this.$route.query.id })
                .then(res => {
                    if (res.success) {
                        // console.log(res);
                        this.carList = res.data;
                        // if (!!res.data.photopath) {
                        let msg = { name: 1, url: "" };
                        msg.name = res.data.id;

                        msg.url = res.data.photopath;
                        this.fileList.push(msg);
                        this.fileList[0].url = res.data.photopath;
                        // }
                        // console.log(this.carList);
                    }
                });
        },
        postUpdatecar() {
            // console.log(this.carList)
            this.$api.cars.home.updatecar(this.carList).then(res => {
                if (res.success) {
                    this.$$message({
                        message: "恭喜您，修改成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "carsmanage" });
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
input,
select,
textarea {
    border-radius: 5px;
}
.control-label {
    padding: 0;
    line-height: 34px;
}
.content-header {
    padding-bottom: 15px;
    .title {
        font-weight: bolder;
    }
}
.modal-body {
    padding: 50px 0;
    text-align: center;
    i {
        font-size: 40px;
        margin-bottom: 20px;
        color: #3c8dbc;
    }
}
.modal-header {
    background: #3c8dbc;
    span {
        line-height: 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: white;
        margin-top: 10px;
        border-radius: 50%;
    }
}
.btn-block {
    width: 60px;
    background: #3c8dbc;
    float: right;
}
.fa-asterisk {
    font-size: 1px;
    color: red;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
    .el-upload--picture-card {
        display: none;
    }
}
input[type="file"] {
    display: none;
}
</style>